<template>
  <div id="news">
    <mt-header fixed title="掌游宝" class="head">
      <div slot="left">
        <mt-button style="margin-left:15%;"  @click="goback()">
          <
        </mt-button>    
      </div>
    </mt-header>
   <mt-tabbar :selected.sync="selected" fixed="true">
    
      <div class="newsTextarea">
        <input placeholder="说点什么吧。。" v-model="text"></input>
        <div class="like"></div>
        <div class="unlike"></div>
        <div class="comments" @click="goComment"></div>
      </div>
   
   </mt-tabbar>
  <div class="title">{{news.nTitle}}</div>
  <div class="author">——{{news.nAuthor}}@掌游宝</div>
  <div class="text"><img :src="getPic()"><br>{{news.nText}}</div>
  <div class="cTitle">热门评论</div>
  <div v-for="(i,index) in news.nComments">
    <div class="cList">
    <div><img class="img-circle" :src="getAvatar(index)"></div>
    <div class="name">{{i.uName}}</div>
    <div class="time"> {{i.afterTime}}</div>
    <div class="like">like</div><span class="likeNum">{{i.like}}</span>
  </div>
  <div id="cText"> {{i.cText}}</div>
  </div>
  
  </div>
</template>

<script>
  export default {
  name: 'app',
  data () {
    return {
      news:{
        nComments:{}
      },
      text:"",
      comments:{
        num:0,
        uPic:"../src/assets/100x100.png",
        uName:"刘东明",
        cText:"我是个傻逼",
        beforeTime:1492431076434,
        afterTime:"",
        like:"100",
      }
    }
  },
  methods:{
    /*************************/ 
    get(){
      //获取仓库数据
      this.news=this.$store.state.news[this.$store.state.newId];
      // console.log(this.$store.state.news[this.$store.state.newId])
      //获取json长度
      var getlength=function(jsonData){
          var jsonLength = 0;
          for(var item in jsonData){
              jsonLength++;
          }
          return jsonLength;
      }

      /*获取时间*/ 
      var myDate=new Date()
      var bTime,aTime;
      var length=getlength(this.news.nComments);
      console.log(myDate.getTime());
    
      for(var i=0;i<length;i++){
          bTime=this.news.nComments[i].beforeTime;
          aTime=parseInt((myDate.getTime()-bTime)/1000);
          if(aTime/60<1){
              this.news.nComments[i].afterTime=aTime+"秒前"
          }else if(aTime/3600<1){
              this.news.nComments[i].afterTime=parseInt(aTime/60)+"分钟前"
          }else if(aTime/86400<1){
              this.news.nComments[i].afterTime=parseInt(aTime/3600)+"小时前"
          }else{
              this.news.nComments[i].afterTime=parseInt(aTime/86400)+"天前"
          }
        
      }
    },


    /********************************************************** */
    goComment(){
      // var getlength=function(jsonData){
      //   var jsonLength = 0;
      //   for(var item in jsonData){
      //       jsonLength++;
      //   }
      //   return jsonLength;
      // }

      // var myDate=new Date()
      // var i=getlength(this.news.nComments);
      // console.log(i);
      // //this.comments.uName=this.$store.state.userName;
      // this.comments.cText=this.text;
      // this.comments.beforeTime=myDate.getTime();
      // this.comments.num=i;
      // console.log(this.comments);
      // this.$store.commit('comment',this.comments);
      // this.get();
      // console.log(this.news.nComments);
      // this.$router.go(-1);
      // this.$router.go(1);
      console.log("21")
    },
    goback(){
       this.$router.go(-1);
    },
    getAvatar(i){
        return this.news.nComments[i].uPic
    },
    getPic(){
      return this.news.nPic
    },
    
  },
   mounted(){
    this.get();
   
    
    
  }
 
}
</script>

<style>
  #news{
    
  }
#news .title{

  margin-top:4%;

  padding-left: 2%;
  text-align: left;
  font-size: 350%
}
#news .author{
  margin-top: 3%;
  padding-left: 2%;
  text-align: left;
  font-size: 200%;
}
#news .text{
  height: 1000px;
  
  margin-top: 5%;
  padding-left: 2%;
  text-align: left;
  font-size: 250%;
}
#news .text img{
  width: 60%;
  height: 40%;
  margin-left: 20%
}
#news .cTitle{
  margin-top: 5%;
  padding-left: 2%;
  width: 20%;
  text-align: left;
  font-size: 300%;
 border-bottom: 5px solid blue;
 
  padding-bottom: 0%;
}
#news .cList{
  
  padding-left: 2%;
  text-align: left;
  font-size: 300%;
  border-top: 1px solid blue;
  padding-bottom: 0%
}
#news .cList img{
  height: 100px;
  background-color: blue;
  width: 100px;
  margin-top: 2%
}
#news .cList div{
  position: absolute;
  padding-top: 2%
}
#news .name{
  color:blue;
  width: 80%;
  padding-left: 13%;
}
#news .time{
  width: 80%;
  font-size: 70%;
  padding-left: 13%;
  margin-top: 7%
}
#news .like{
  position: absolute;
  right: 10%
}
#cText{
  font-size: 300%;
  width: 100%;
  padding-left:15%;
  text-align: left;
  margin-top: 15%;
  border-bottom: 1px solid blue;
  padding-bottom: 2%
}
.likeNum{
  position: absolute;
  right: 2%;
  margin-top: 2%
}
#news .newsTextarea{
  font-size: 100%;
  background-color: #2c46a5;
  height: 80px;
  width: 100%;
  margin: 0%;
  line-height: 80px;
  text-align: left;
  padding-left: 2%
}
#news .newsTextarea input{
  height:50px;
  border-radius:50px;
  width: 50%;
  font-size: 220%;
  padding-left: 2%;
  margin-top: 1.5%
}
#news .newsTextarea .like{
  position: absolute;
  height: 50px;
  width: 5%;
  background-color: yellow;
  font-size: 500%;
  right: 25%;
  top: 20%;
}
#news .newsTextarea .unlike{
  position: absolute;
  height: 50px;
  width: 5%;
  background-color: red;
  font-size: 500%;
  right: 15%;
  top: 20%;
}
#news .newsTextarea .comments{
  position: absolute;
  height: 50px;
  width: 5%;
  background-color: black;
  font-size: 500%;
  right: 5%;
  top: 20%;
}
</style>
